<template>
  <div>
    <el-form label-width="60px" size="small" class="base-search-more">
      <el-row type="flex">
        <el-col :span='6'>
          <el-form-item label-width="0">
            <div class="btn-item flex">
              <span :class="{'cur':params.selectType=='1'}" @click='changeTypePage(1)'>全部</span>
              <span :class="{'cur':params.selectType=='2'}" @click='changeTypePage(2)'>未读</span>
              <span :class="{'cur':params.selectType=='3'}" @click='changeTypePage(3)'>已读</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span='6' >
          <el-form-item label='日期'>
            <pt-date-picker v-model="params.date" :shortcuts="[{ text: '今天', start: 0, end: 0}, { text: '昨天', start: -1, end: 0},
                { text: '近七天', start: -7, end: 0}, {text: '近一个月', start: -30, end: 0}]" />
          </el-form-item>
        </el-col>
        <el-col :span='12' style="text-align: right;">
          <el-form-item label-width="0">
            <el-button type="primary" icon="el-icon-search" @click="$refs.pagination.handleSizeChange(10)">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="base-table-wrap">
      <el-table :data="tableData.list" stripe style="width: 100%">
        <el-table-column prop="createtime" label="消息日期" width="180" align="center"></el-table-column>
        <el-table-column prop="title" label="主题" min-width="460" align="left"></el-table-column>
        <el-table-column  label="已读/未读" width="160" align="center">
          <template slot-scope="scope">
            <div v-if='scope.row.haveread'>已读</div>
            <div v-else style='color: red'>未读</div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="80">
          <template slot-scope="scope">
            <el-button class="el-text-check" type="text" size="mini"  @click='addInform(scope.row)'>查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pt-table-loading v-show="isloadingTable"></pt-table-loading>
      <pt-pagination ref="pagination" :total="tableData.total" @listeningEvent="triggerEvent"></pt-pagination>
    </div>
    <div v-show='dialogTableVisible' class='info-inform-addShop'>
      <div style='margin: 15px;background: #fff;'>
        <el-row class="back-head" type="flex" align="middle">
          <span @click="dialogTableVisible = false" style="cursor: pointer"><i class="el-icon-arrow-left"></i>返回</span>
          <span style='color:#8c8b8b'>通知日期：{{check.createtime}}</span>
        </el-row>
        <div style='padding: 15px;max-width: 1000px;margin: 0 auto'>
          <p style='line-height: 40px;margin:0 auto; font-weight: bold;font-size: 18px;text-align: center'>
            {{check.title }}</p>
          <p style='font-size: 16px;font-weight: bold;line-height: 100px'>尊敬的{{check.agentname||'代理'}}:</p>
          <div class='quill-editor '>
            <div class="ql-container ql-snow">
              <div style='margin-top: 40px' class='ql-editor ql-blank' v-html='check.content'></div>
            </div>
          </div>
          <p style='text-align: center;line-height: 65px'>
            <el-button v-if='!check.haveread' type="primary" @click="dialogTableVisible = false">暂不处理处理</el-button>
            <el-button v-if='!check.haveread' type="primary" @click="catinform(check.id)">已处理</el-button>
            <el-button @click="dialogTableVisible = false">返回列表</el-button>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { getDay } from '@/utils/ptkc.js'
  export default {
    inject: ['updateSumTotal'],
    data() {
      return {
        params: {
          page: 0,
          size: 10,
          selectType: '1',
          agentid: '',
          date: '',
        },
        haveread:false,
        check: {
          title: '',
          content: '',
          agentname: '',
          createtime: '',
          haveread:'',
          id:''
        },
        caiId:'',  //被查看id
        isloadingTable: false,
        dialogTableVisible: false,
        tableData: {}  //表单数据
      }
    },
    methods: {
      changeTypePage(type) {
        this.params.selectType = type
        this.$refs.pagination.handleSizeChange(10)
      },
      addInform(row) {  //查看
        this.haveread = false
        this.check.title = row.title||''
        this.check.content = row.content||''
        this.check.agentname = row.agentname||''
        this.check.createtime = row.createtime||''
        this.check.haveread = row.haveread
        this.check.id = row.id
        this.dialogTableVisible = true
      },
      triggerEvent(type,val) { // 分页器
        if (type === 'page') {
          this.params.page = val - 1
        } else if (type === 'size') {
          this.params.page = 0
          this.params.size = val
        }
        this.getTableList()
      },
      catinform(id) { //提交被查看
        this.$http.get('/server/notice/info?id='+ id).then(res => {
          if (res.data.success) {
            this.dialogTableVisible = false
            this.updateSumTotal()
            this.getTableList()
          }
        })
      },
      getTableList() {
        this.isloadingTable = true
        const params = { ...this.params }
        params.date = params.date? params.date.join(','):''
        let url = ''
        const type = JSON.parse(sessionStorage.getItem('loginMsg')).type
        if(type == '2' || type == '3') url = '/server/notice/agentList?'
        else if(type == '1') url = '/server/notice/list?'
        this.$http.get(url + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.tableData = res.data.data
          }
        }).finally(() => { this.isloadingTable = false })
      }
    },
    mounted() {
      this.getTableList()
    },
  }
</script>

<style lang="scss" scoped>
@import './css/index.scss';
</style>
